<template>
  <el-form ref="ruleFormRef" :rules="rules" :model="formConfig.dataObj" class="fixed-label-width">
    <div class="flex">
      <div class="left">
        <el-form-item label="店铺名称" prop="storeName">
          <el-input v-model="formConfig.dataObj.storeName" />
        </el-form-item>
        <el-form-item label="门店类别" prop="categoryId">
          <el-select v-model="formConfig.dataObj.categoryId" placeholder="门店类别" filterable>
            <el-option v-for="item in categoryOptions" :key="item.id" :label="item.categoryName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="菜品类别" prop="foodType" class="food-typep-item">
          <tag :tagList="foodTypeList" />
        </el-form-item>
        <el-form-item label="合作价格" prop="storePrice">
          <el-input v-model="formConfig.dataObj.storePrice" type="number" />
          <span style="margin-left: 10px; color: #888">(元 / 份)</span>
        </el-form-item>

        <el-form-item label="营业时间">
          <el-form-item  prop="businessStart_date">
            <el-time-picker v-model="formConfig.dataObj.businessStart_date" format="HH:mm"
              style="width:91px" :editable="false" :clearable="false"/>
          </el-form-item>
          <div class="split-line" style="width: 8px;display: inline;margin:0 5px"></div>
          <el-form-item  prop="businessEnd_date">
            <el-time-picker v-model="formConfig.dataObj.businessEnd_date" format="HH:mm"
              style="width:91px" :editable="false" :clearable="false"/>
          </el-form-item>
        </el-form-item>

        <el-form-item label="店铺描述" prop="storeDescription">
          <el-input v-model="formConfig.dataObj.storeDescription" type="textarea" />
        </el-form-item>
        <el-form-item label="店铺地址" prop="storeAddress">
          <el-input v-model="formConfig.dataObj.storeAddress" type="textarea" />
          <hz-button type="primary" link @click='mapDialogShow=true'>打开地图选点</hz-button>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="formConfig.dataObj.longitude" />
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="formConfig.dataObj.latitude" />
        </el-form-item>
        <el-form-item label="打印机SN" prop="printerSn">
          <el-input v-model="formConfig.dataObj.printerSn" />
        </el-form-item>
        <el-form-item label="店主姓名" prop="merchantName">
          <el-input v-model="formConfig.dataObj.merchantName" />
        </el-form-item>
        <el-form-item label="店主身份证" prop="merchantIdNum">
          <el-input v-model="formConfig.dataObj.merchantIdNum" />
        </el-form-item>
        <el-form-item label="店主手机号" prop="merchantPhone">
          <el-input v-model="formConfig.dataObj.merchantPhone" />
        </el-form-item>
        <el-form-item label="店主微信号" prop="merchantWechatNum">
          <el-input v-model="formConfig.dataObj.merchantWechatNum" />
        </el-form-item>
      </div>

      <div class="right">
        <el-form-item label="店铺logo" prop="logo">
          <upload ref="logoRef" :imageUrl="formConfig.dataObj.logo" />
        </el-form-item>
        <el-form-item label="店铺资质" prop="qualification">
          <upload ref="qualificationRef" :imageUrl="formConfig.dataObj.qualification" />
        </el-form-item>
      </div>
    </div>



  </el-form>

  <div class="dialog-footer my-dialog-foot">
    <hz-button type="primary" @click="clickSubmit">确定</hz-button>
    <hz-button @click="clickCancle">取消</hz-button>
  </div>

  <!-- 地图 -->
  <hz-dialog v-model="mapDialogShow" title="地图选点" fullscreen>
    <myMap :addressClick="addressClick" :close="closeMap" ref="mapRef" :lngLat="lngLatData" />
  </hz-dialog>
</template>
<script setup>
import { ref, reactive, computed, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import upload from '@/views/common/upload.vue'
import tag from '@/views/common/tag.vue'
import myMap from '@/views/common/map.vue'
import { ElMessage } from 'element-plus'

const store = useStore();
const mapDialogShow = ref(false)
const { proxy } = getCurrentInstance();
const props = defineProps({
  formConfig: {
    default: {
      dataObj: {},
      dialog: {},
      type: '',
      okCallback: () => { },
      noCallback: () => { },
    }
  },
});

const mapRef = ref(null);
const ruleFormRef = ref(null);
const logoRef = ref(null);
const qualificationRef = ref(null);

const categoryOptions = ref([])    // 店铺类别
const foodTypeList = ref([])       // 菜品类别
handleFoodTypeList();
getCategoryOptions();
let lngLatData = computed(() => {
  return {
    lng: props.formConfig.dataObj.longitude,
    lat: props.formConfig.dataObj.latitude,
  }
})

// 表单校验规则
const rules = reactive({
  storeName: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  foodTypeName: [{ required: true, message: "菜品类别不能为空", trigger: "blur" }],
  categoryId: [{ required: true, message: "店铺类别不能为空", trigger: "blur" }],
  storePrice: [{ required: true, message: "合作价格不能为空", trigger: "blur" }],
  storeAddress: [{ required: true, message: "地址不能为空", trigger: "blur" }],
  longitude: [{ required: true, message: "经度不能为空", trigger: "blur" }],
  latitude: [{ required: true, message: "纬度不能为空", trigger: "blur" }],
});


/* ---------------------------methods--------------------------- */

// 初始化菜品类别
function handleFoodTypeList() {
  let list = props.formConfig.dataObj.foodType || [];
  foodTypeList.value.push(...list)
}


// 获取店铺类别的下拉数据
function getCategoryOptions() {
  proxy.$http.get('/jx/jxStoreCategory/queryCategoryInfoByKeyword').then(res => {
    if (res.code == 200) {
      categoryOptions.value = res.result || [];
      if (categoryOptions.value.length && props.formConfig.dataObj.categoryId === '') {
        props.formConfig.dataObj.categoryId = categoryOptions.value[0].id
      }
    }
  })
}

// 地图上选点后确定返回数据
function addressClick(data) {
  console.log(data, 22222)
  // storeAddress
  let obj = props.formConfig.dataObj
  obj.storeAddress = data.address
  obj.longitude = data.lng
  obj.latitude = data.lat
}
// 退出地图
function closeMap(data) {
  mapDialogShow.value = false;
}

// 点击确定，提交数据
function clickSubmit() {
  if (!ruleFormRef.value) return
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      submitForm();
    } else {
      console.log('提交校验不通过', fields)
    }
  })

}

// 提交新增 或编辑
function submitForm() {
  let params = getSubmitParam();
  if (!params) {
    return;
  }
  proxy.$http.post('/jx/jxStoreManage/addOrEditStoreInfo', params, { successTip: true }).then(res => {
    if (res.code == 200) {
      props.formConfig.dialog.show = false;
      props.formConfig.okCallback();
    }
  })
}


// 获取要保存的数据
function getSubmitParam() {
  let params = { ...props.formConfig.dataObj }

  // resultNamez存在说明重新上传了图片
  let image1= logoRef.value.image
  params.logo = image1.resultName ? image1.resultName : image1.url;
  let image2 = qualificationRef.value.image
  params.qualification = image2.resultName ? image2.resultName : image2.url;
  if (!params.qualification) {
    // delete params.qualification
  }

  // 时间格式化时分秒
  params.businessStart = proxy.$util.moment(params.businessStart_date).format('HH:mm') + ':00'
  params.businessEnd = proxy.$util.moment(params.businessEnd_date).format('HH:mm') + ':00'

  params.foodType = foodTypeList.value;
  let obj = categoryOptions.value.find(val => val.id == params.categoryId)
  if (obj) {
    params.categoryName = obj.categoryName;
  }

  if (params.id) {
    params.storeId = params.id    // 说明是编辑
  }
  console.log(params)
  // return;
  if (!params.logo) {
    ElMessage.warning('请上传店铺logo图片')
    return
  }
  return params
}

// 点击取消的回调
function clickCancle() {
  props.formConfig.dialog.show = false;
}

// 对外暴露数据
defineExpose({});
</script>

<style lang="scss" scoped>
.food-typep-item {
  width: 360px;
}
</style>
